<template>
  <div class="focus_page">
    <UserAvatar :info="userInfo" />

    <div class="focus_list">
      <template v-for="(item, index) in list">
        <!-- 医院 开始 -->
        <div
          class="cell_box"
          :key="`hosp_${index}`"
          v-if="item.followedType == 1"
        >
          <div class="info_box">
            <div class="avatar">
              <nuxt-link :to="`/hospital/${item.hospital?item.hospital.id:''}`">
                <li-image :src="item.hospital.logo" class="img" v-if="item.hospital.logo" />
                <img src="@/assets/images/avatar/hospital_default.png" class="img" alt="" v-else>
              </nuxt-link>
            </div>
            <div class="info">
              <h2 class="h2">
                <nuxt-link :to="`/hospital/${item.hospital?item.hospital.id:''}`">{{
                  item.hospital.name
                }}</nuxt-link>
              </h2>
              <div class="score">
                <!-- <el-rate
                  v-model="item.hospital.initScore"
                  class="li_rate"
                  show-score
                  text-color="#FFA800"
                  allow-half
                  disabled
                ></el-rate> -->
                <li-rate v-model="item.hospital.initScore" disabled></li-rate>
                <el-divider direction="vertical"></el-divider>
                <span>{{ item.hospital.commentCnt||0 }}条评价</span>
              </div>
              <div class="address">
                {{ item.hospital.province }}{{ item.hospital.city
                }}{{ item.hospital.district }}{{ item.hospital.address }}
              </div>
            </div>
          </div>
          <div class="btn_box">
            <button class="btn" @click="takeOff(item.hospital.id, 'hospital')">
              取消关注
            </button>
          </div>
        </div>
        <!-- 医院 开始 -->

        <!-- 医生 开始 -->
        <div
          class="cell_box"
          :key="`doctor_${index}`"
          v-if="item.followedType == 2"
        >
          <div class="info_box">
            <div class="avatar">
              <nuxt-link :to="`/doctor/${item.doctor.id}`">
                <li-image :src="item.doctor.logo" class="img" v-if="item.doctor.logo" />
                <img src="@/assets/images/avatar/doctor_circle.png" class="img" alt="" v-else>
              </nuxt-link>
              <img
                src="@/assets/images/rz.png"
                class="rz"
                alt=""
                v-if="item.doctor.hasCertified == 1"
              />
            </div>
            <div class="info">
              <h2 class="h2">
                <span
                  ><nuxt-link :to="`/doctor/${item.doctor.id}`">{{
                    item.doctor.name
                  }}</nuxt-link></span
                >
                <span class="sub">{{ item.doctor.personalTitle }}</span>
              </h2>
              <div class="work">从业经验{{ item.doctor.workYears }}年</div>
              <div class="project">擅长 {{ item.doctor.expertProject }}</div>
            </div>
          </div>
          <div class="btn_box">
            <button class="btn" @click="takeOff(item.doctor.id, 'doctor')">
              取消关注
            </button>
          </div>
        </div>
        <!-- 医生 开始 -->
      </template>
    </div>
  </div>
</template>
<script>
import { Rate, Divider } from "element-ui";
import {
  GET_PERSONAL_MYFOLLOWED,
  FOLLOWED_HOSPITAL_INFO,
  FOLLOWED_DOCTOR_INFO,
} from "@/http/interface";
import UserAvatar from "@/components/user/index.vue";
import { showModal, showToast } from "@/utils/utils.js";
export default {
  name: "MyFocus",
  components: {
    [Rate.name]: Rate,
    [Divider.name]: Divider,
    UserAvatar,
  },
  data() {
    return {
      list: [],
      userInfo: {},
    };
  },
  created() {
    this.userInfo = this.$cookies.get("user");
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      let res = await this.$axios.get(GET_PERSONAL_MYFOLLOWED);
      let list = res.data || [];
      list.map(k => {
        k.hospital = k.hospital || {}
        k.doctor = k.doctor || {};
        return k;
      })
      this.list = list;
    },

    // 取关
    async takeOff(id, type) {
      let _this = this;
      let ajaxurl = FOLLOWED_HOSPITAL_INFO;
      let params = { id: id };

      if (type == "doctor") {
        ajaxurl = FOLLOWED_DOCTOR_INFO;
      }

      showModal({
        message: "确定取消关注吗？",
        showCancelButton: true,
        success: function () {
          _this.attention(ajaxurl, params);
        },
      });
    },

    //
    async attention(ajaxurl, params) {
      let res = await this.$axios.get(ajaxurl, {
        params: params,
      });
      if (res.code == 200) {
        showToast({
          message: "操作成功",
          type: "success",
        });
        this.getList();
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/my/focus.less";
</style>